<template>
  <div class="basic-node-config">
    <el-form :model="config" label-width="80px" size="small">
      <el-form-item label="节点名称">
        <el-input v-model="config.name" placeholder="请输入节点名称" />
      </el-form-item>
      
      <el-form-item label="节点描述">
        <el-input 
          v-model="config.description" 
          type="textarea" 
          :rows="3"
          placeholder="请输入节点描述（可选）" 
        />
      </el-form-item>
    </el-form>
    
    <div class="dialog-footer">
      <div class="footer-actions">
        <el-button @click="handleCancel">取消</el-button>
        <el-button @click="handleSave" type="primary">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'


const props = defineProps({
  nodeData: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['save', 'cancel'])

// 配置数据
const config = reactive({
  name: '',
  description: ''
})

// 监听节点数据变化
watch(() => props.nodeData, (newData) => {
  if (newData) {
    config.name = newData.data.label || ''
    config.description = newData.data.config?.description || ''
  }
}, { immediate: true })

// 保存配置
const handleSave = () => {
  emit('save', {
    name: config.name,
    description: config.description
  })
}

// 取消编辑
const handleCancel = () => {
  emit('cancel')
}


</script>

<style scoped>
.basic-node-config {
  padding: 16px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e4e7ed;
}

.footer-actions {
  display: flex;
  gap: 8px;
}
</style>